<template>
	<view>
		<u-cell-group>
			<view class="uni-padding-wrap uni-common-mt">
				<view class="uni-flex uni-row" style="flex-wrap: wrap;">
				  <view class="flex-item"  @click="getUserInfo">
					  <u-avatar :src="src" shape="circle" size="110"></u-avatar>
						<text v-text="nickName"></text>
				  </view>
        </view>
      </view>
			<view @click="addTeam">
				<u-cell
				  class="min" 
					title="加入团队" 
					:isLink="true"
				>
				</u-cell>
			</view>
	  </u-cell-group>
		<!-- 加入团队弹出框 -->
		<u-popup
			:show="isShow"
			mode="center"
			:round="10"
			overlay="true"
			closeable="true"
			closeIconPos="top-right"
			safeAreaInsetTop
			customStyle="width: 80%; height: 48%; padding:3%"
			@close="isShow = false"
			@open="open"
		>
			<u--form
				labelPosition="left"
				labelWidth=150
				:model="userInfo"
			>
				<u-form-item
					label="姓名:"
					prop="userInfo.nickname"
				>
					<u--input
					  placeholder="请输入姓名"
					  customStyle="width: 70%; margin-left:10%"
						v-model="userInfo.nickname"
					></u--input>
				</u-form-item>
				<u-form-item
					label="学号:"
					prop="userInfo.num"
				>
					<u--input
					    placeholder="请输入学号"
					    customStyle="width: 70%; margin-left:10%"
							v-model="userInfo.num"
					></u--input>
				</u-form-item>
				<u-form-item
					label="学校:"
					prop="userInfo.school"
				>
					<u--input
					    placeholder="请输入学校"
					    customStyle="width: 70%; margin-left:10%"
							v-model="userInfo.school"
					></u--input>
				</u-form-item>
					<button type="primary" size="mini" form-type="submit" style="float:right;" @click="submit">确定</button>
			</u--form>
		</u-popup>
		<!-- 是否已绑定学校 -->
		<u-toast ref="uToast"></u-toast>
	</view>

</template>

<script>
	export default {
		onShow() {
			uni.getStorage({
				key: '218002',
				success: ((res) => {
					console.log(res);
					this.src=res.data.resTwo.userInfo.avatarUrl;
					this.nickName = res.data.resTwo.userInfo.nickName;
					this.openid = res.data.openid;
				})
			});
			
		// let a = uni.getStorage('218002')
		// console.log("llls");
		},
		data() {
			return {
				src: require('../../static/touxiang.png'),
				nickName: "未登录",
				openid: '',
				//加入团队弹出框
				isShow: false,
				//绑定学校的学生信息
				userInfo: {
					nickname: '',
					num: '',
					phone: '',
					password: '',
					school: '',
					dept: ''
				},
				//绑定成功toast
				toast: {
						type: 'success',
						icon: false,
						message: "绑定成功",
					},
					//绑定失败toast
					toast2: {
						type: 'error',
						icon: false,
						message: "绑定失败",
					},
			}
		},
		methods: {
			getUserInfo(){
        // console.log("获取用户信息");
				uni.getUserProfile({
					lang:'zh_CN',
					desc: "获取你的昵称、头像、地区及性别",
					success:res=>{
						// console.log(res);
			      this.src = res.userInfo.avatarUrl;
			      this.nickName = res.userInfo.nickName;
					},
					fail:err=>{
						// console.log(err)
					}
				})
		  },
			//加入团队按钮
			addTeam() {
				this.isShow = true;
			},
			//绑定学校toast打开
			open() {
        // console.log('open');
      },
			//绑定学校提交
      submit() {
				let that = this;
				wx.request({
					url: 'http://localhost:8123/record/bind', //仅为示例，并非真实的接口地址
					data: {
						openid: that.openid,
						nickname: that.userInfo.nickname,
						num: that.userInfo.num,
						phone: that.userInfo.phone,
						password: that.userInfo.password,
						school: that.userInfo.school,
						dept: that.userInfo.dept
					},
					method: 'POST',
					header: {
						'content-type': 'application/json' // 默认值
					},
					success:(res => {
						console.log(11,res);
						this.toast.message = res.data.msg;
						if (res.data.code == 200) {
							this.$refs.uToast.show({
								...this.toast,
							})
						} else {
							this.$refs.uToast.show({
								...this.toast2,
							})
				    }
					})
			  })
        this.isShow = false;
      },
		},
	}
</script>

<style>
.bg {
	margin: 0;
	padding: 0;
	background-color: rgb(132, 135, 137);
}
.min{
	background-color: #fff;
}
.flex-item {
	text-align: left;
	line-height: 80rpx;
	background-color: #fff;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}	
.uni-padding-wrap{
	width: 100%;
	padding: 0px;
	margin: 0px;
}
</style>
